<template>
  <div class="col-md-3">
    <div
      class="card mb-4 shadow-sm"
      @mouseover="hover = true"
      @mouseleave="hover = false"
    >
      <div @click="openEnhance">
        <v-lazy-image
          :src="image.url"
          :src-placeholder="loaderUrl"
          class="card-img-top"
          style="width: 100%; display: block"
        />
      </div>

      <div class="card-body" style="width: 100%">
        <div class="row" style="width: 100%">
          <span
            :class="{ 'text-truncate': !hover }"
            style="width: 100%; float: left"
          >
            <strong class="card-title">
              {{ image.id }}:{{ image.file_name }}
            </strong>
          </span>

          <i
            class="card-text fa fa-ellipsis-v fa-x icon-more"
            :id="'dropdownImage' + image.id"
            data-toggle="dropdown"
            aria-haspopup="true"
            aria-expanded="false"
            aria-hidden="true"
          />

          <!-- 图片操作栏 -->
          <div
            class="dropdown-menu"
            :aria-labelledby="'dropdownImage' + image.id"
          >
            <button
              class="btn dropdown-item"
              @click="onDeleteClick"
            >
              删除
            </button>
            <button
              class="btn dropdown-item"
              @click="onDownloadClick"
            >
              下载图片
            </button>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "EnhanceImageCard",
  props: {
    image: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      hover: false,
      loaderUrl: require("@/assets/loader.gif"),
    };
  },
  methods: {
    downloadURI(uri, exportName) {
      let link = document.createElement("a");
      link.href = uri;
      link.download = exportName;
      document.body.appendChild(link);
      link.click();
      link.remove();
    },
    openEnhance() {
      console.log("open")
      // this.$router.push({
      //   name: "annotate",
      //   params: { identifier: this.image.id },
      // });
    },
    onDownloadClick() {
      this.downloadURI(
        "/api/image/" + this.image.id + "?asAttachment=true",
        this.image.file_name
      );

      axios.get("/api/image/" + this.image.id + "/coco").then((reponse) => {
        let dataStr =
          "data:text/json;charset=utf-8," +
          encodeURIComponent(JSON.stringify(reponse.data));
        this.downloadURI(
          dataStr,
          this.image.file_name.replace(/\.[^/.]+$/, "") + ".json"
        );
      });
    },
    onDeleteClick() {
      axios.delete("/api/image/" + this.image.id).then(() => {
        this.$parent.updatePage();
      });
    },
  },
};
</script>

<style scoped>
.card-img-overlay {
  padding: 0;
}

.overlay-text {
  position: absolute;
  padding: 10px;
  top: 30px;
  width: 100%;
}

.card-body {
  margin: 5px 5px 0 5px;
  padding: 10px 20px;
}

p {
  margin: 0;
  padding: 0 0 3px 0;
}

.list-group-item {
  height: 21px;
  font-size: 13px;
  padding: 2px;
  background-color: #4b5162;
}
.icon-more {
  position: absolute;
  right: 5px;
  padding: 3px 10px;
  float: right;
  color: black;
}
.category-badge {
  float: left;
  margin: 0 2px 5px 0;
}
</style>
